<template>
  <div style="width:100%;height:100%;position: relative;">
    <!-- <h2 style="color:#fff">星座图</h2> -->
    <canvas id="starJd" style="width:100%;height:100%"></canvas>
    <div
      style="position: absolute;top: 5px;left: 50%; transform: translateX(-50%);color: #dbffff;font-size: 16px;"
    >
      星座图
    </div>
  </div>
</template>

<script>
import chart from "@/assets/js/myCharts.js";
export default {
  // 星座图
  name: "Constellation",
  data() {
    return {
      jdChart: null,
    };
  },
  mounted() {
    this.initChart();
  },
  methods: {
    // 初始化星座图
    initChart() {
      this.jdChart = chart();
      this.jdChart.chartXingzuo({
        container: "starJd",
        point_color: {
          r: 1,
          g: 0,
          b: 0,
        },
        // line_color: {
        //   r: 1,
        //   g: 1,
        //   b: 1,
        // },
      });
    },
    // 绘制星座图
    drawChart(starData) {
      let temArr = [];
      // 求出I/Q的最大值，对其进行归一化
      let xMax = Math.max.apply(
        null,
        starData.map((item) => item[0])
      );
      let yMax = Math.max.apply(
        null,
        starData.map((item) => item[1])
      );

      starData.forEach((item) => {
        temArr.push(item[0] / xMax, item[1] / yMax);
      });
      // console.log("星座图数据", temArr);
      this.jdChart.clear(); // 清空星座图
      /** 添加多个点并立即绘制
       * 参数一： 格式[x1,y1,x2,y2,x3,y3]的数组
       * 参数二： 绘制点的大小
       */
      this.jdChart.drawPoints(temArr, 2);
    },
  },
};
</script>

<style lang="less" scoped></style>
